<template>
  <div class="wrap">
    <!-- 头部导航 -->
    <div class="app-navbar-header">
      <van-nav-bar title="个人信息" left-arrow @click-left="$router.back()">
        <div slot="right" style="color: white">保存</div>
      </van-nav-bar>
    </div>
    <!-- 个人信息 -->
    <input type="file" hidden ref="inputFile" accept="image/*" @change="onFileChange"/>
    <van-cell-group>
      <van-cell title="头像" is-link @click="$refs.inputFile.click()">
        <div>
          <van-image
            width="24"
            height="24"
            round
            fit="cover"
            :src="userDate.photo"
          />
        </div>
      </van-cell>
      <van-cell title="昵称" is-link center @click="isNameShow = true">
        <span>{{ userDate.name }}</span>
      </van-cell>
      <van-cell title="介绍" is-link center />
      <van-cell title="性别" is-link center @click="isGenderShow = true">
        <span>{{ userDate.gender === 1 ? "男" : "女" }}</span>
      </van-cell>
      <van-cell title="生日" is-link center @click="isBirthdayShow = true">{{
        userDate.birthday
      }}</van-cell>
    </van-cell-group>
    <!-- 修改昵称的pop -->
    <van-popup
      v-model="isNameShow"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <Update-name
        v-if="isNameShow"
        v-model="userDate.name"
        @colseName="isNameShow = false"
        @handleOver="handleOver"
      />
    </van-popup>
    <!-- 修改性别的pop -->
    <van-popup v-model="isGenderShow" position="bottom">
      <UpdateGender
        @onCancel="isGenderShow = false"
        v-if="isGenderShow"
        v-model="userDate.gender"
      />
    </van-popup>
    <!-- 修改生日的pop -->
    <van-popup v-model="isBirthdayShow" position="bottom">
      <UpdateBirthday
        @onCancle="isBirthdayShow = false"
        v-model="userDate.birthday"
        v-if="isBirthdayShow"
      />
    </van-popup>
     <!-- 修改头像的pop -->
    <van-popup v-model="isPhotoShow" position="bottom" style="height:100%">
       <UpdatePhoto :photoView = 'photoView' @close='isPhotoShow = false' @changeImage='changeImage' v-if="isPhotoShow"/>
    </van-popup>
  </div>
</template>
<script>
import UpdateBirthday from "./components/update-birthday.vue";
import UpdateGender from "./components/update-gender.vue";
import UpdateName from "./components/update-name.vue";
import UpdatePhoto from './components/update-photo.vue';
import { userProfile } from "../../api/profile";
export default {
  name: "user",
  components: {
    UpdateName,
    UpdateGender,
    UpdateBirthday,
    UpdatePhoto
  },
  data() {
    return {
      userDate: {}, // 用户资料
      isNameShow: false, // 昵称的pop是否显示
      isGenderShow: false, // 性别的pop是否显示
      isBirthdayShow: false, // 生日的pop是否显示
      isPhotoShow:false,//头像的pop是否显示
      photoView:''//预览图片的url
    };
  },
  created() {
    this.handleUser();
    
  },
  methods: {
    /* 获取用户资料 */
    async handleUser() {
      const { data } = await userProfile();
      this.userDate = data.data;
    },

    handleOver() {
      this.isNameShow = false;
    },
    //监听input
    onFileChange(value){
      //打开头像预览pop
      this.isPhotoShow = true
      //在弹出层中预览图片
      const blob = this.$refs.inputFile.files[0]//image 的文件对象
      // const blob= window.URL.createObjectURL(this.$refs.inputFile.files[0])//创建blob对象（url)
      this.photoView = blob
      /* 
        为了解决选择相同文件不触发change事件，所以这里
        我们手动的去清空file的value
      */
     this.$refs.inputFile.value = ''
    },
    
    changeImage(image){
      this.userDate.photo = image
    }
  },
};
</script>
<style scoped lang="less">
.van-popup {
  background-color: black;
}
</style>
